<template>
  <div class="page">
    <div class="left">
      <div id="id_test_video" style="width:100%; height:100%;"></div>
    </div>
    <div class="right" v-show="!isDirectMessages">
      <el-radio-group v-model="tabPosition">
        <el-radio-button label="comments">评论</el-radio-button>
        <el-radio-button label="banned">禁言列表</el-radio-button>
        <el-radio-button label="directMessages">私信</el-radio-button>
      </el-radio-group>
      <div class="right-content">
        <!--评论-->
        <div v-show="this.tabPosition == 'comments'">
          <comments live-id="402703536720445440" @toDirect="toDirect"></comments>
        </div>

        <!--禁言列表-->
        <div v-show="this.tabPosition == 'banned'">
          <banned :live-id="liveId"></banned>
        </div>

        <!--私信列表-->
        <div v-show="this.tabPosition == 'directMessages'" class="direct-messages">
          <div class="direct-messages-content">
            <div class="direct-messages-item" v-for="item in directMessagesList" @click="toDirectMessages(item.nickname,item.id)">
              <div class="item-left">
                <div class="head">
                  <img :src="`https://tencentyun-ms-1312352800.cos.ap-guangzhou.myqcloud.com/${item.avatar}`" />
                  <div class="slot" v-if="item.unreadCount > 0">{{item.unreadCount|unreadCountFormat(item.unreadCount)}}</div>
                </div>
                <div class="nickname">{{ item.nickname }}</div>
              </div>
              <div class="item-right">
                <div>{{ (item.time * 1000)|dateFormat(item.timeType) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right" v-show="isDirectMessages">
      <comments
        :live-id="liveId"
        :user-id="userId"
        :is-direct-messages="true"
        :direct-nickname="directNickname"
        @close="closeDirectMessages"
        v-if="isDirectMessages">
      </comments>
    </div>
  </div>
</template>


<script>
import {emojiMap} from '../../utils/emojiMap'
import {decodeText} from '@/framework/utils/decodeText'
import Comments from "./comments";
import Banned from "./banned";
import tim from '@/framework/utils/tim.js';
import {find as findMute} from '@/project/service/mute'
import TIM from 'tim-js-sdk';
import COS from "cos-js-sdk-v5";


export default {
  name: "liveStreaming",
  props:{
    //直播间id
    liveId:{
      type: String,
      default: ''
    }
  },
  data(){
    return{
      tabPosition: 'comments',//标签页
      //私信列表
      directMessagesList:[
        // {nickname:'曹操哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚',time:1657655566,id:'397644770840948736'},
        // {nickname:'刘备',time:1657855682,id:'1'},
        // {nickname:'关羽',time:1657855765,id:'2'},
        // {nickname:'诸葛亮',time:1657855775,id:'3'},
        // {nickname:'张飞',time:1657855776,id:'4'}
      ],
      isDirectMessages:false,//是否显示私信对话框
      isShowEmoji:false,//是否显示表情包框
      emojiMap: emojiMap,
      content:'',//用户输入内容
      //聊天消息列表
      messageList:[
        {flow:'out',nick:'小明',type:'TIMTextElem',text:'是否包邮？',time:1657655566},
        {flow:'out',nick:'小红',type:'TIMTextElem',text:'是否包邮？',time:1657855682},
        {flow:'in',nick:'小刚',type:'TIMTextElem',text:'顺丰包邮',time:1657859995},
        {flow:'in',nick:'小刚',type:'TIMTextElem',text:'质量可靠吗？',time:1657855765},
        {flow:'out',nick:'小明',type:'TIMTextElem',text:'必须可靠',time:1657855790},
        {flow:'in',nick:'小刚',type:'TIMTextElem',text:'支持转转验机，这样你我都放心。',time:1657855766},
        {flow:'in',nick:'小刚',type:'TIMTextElem',text:'好',time:1657855775},
        {flow:'out',nick:'小明',type:'TIMTextElem',text:'支持的哦',time:1657855780},
        {flow:'in',nick:'小刚',type:'TIMTextElem',text:'支持转转验机，这样你我都放心。',time:1657855776},
        {flow:'in',nick:'小刚',type:'TIMTextElem',text:'好',time:1657855885},
        {flow:'in',nick:'小刚',type:'TIMTextElem',text:'是否包邮？',time:1657859995},
      ],
      decodeText: decodeText,//处理消息中的表情包
      isNow: false,//消息的时间是否接近
      directNickname: '',//私信者的昵称
      userId: '',//聊天对象的id
    }
  },
  components:{ Comments,Banned },
  watch:{
    //监听会话列表
    '$store.state.userList'(val){
      this.directMessagesList = val.slice()
      this.handleTime(this.directMessagesList)
    },
    deep: true, //true 深度监听
  },
  filters: {
    // 时间处理过滤器
    dateFormat(dateStr, time) {
      if (dateStr) {
        let date = new Date(dateStr)
        let year = date.getFullYear()
        let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
        let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        let hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        let mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        let ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        if (time && time.toLowerCase() === 'hh:mm') {
          return `${hh}:${mm}`
        } else {
          return `${year}-${month}-${day} ${hh}:${mm}`
        }
      } else {
        return ''
      }
    },
    unreadCountFormat(num){
      if(num>99){
        return 99
      }else{
        return num
      }
    },
  },
  created(){
    this.handleTime(this.messageList)
    this.findMute()
  },
  mounted(){
    var player =  new TcPlayer('id_test_video', {
      "m3u8": "https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8",
      "flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
      "autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
      "poster" : "http://www.test.com/myimage.jpg",
      "width" :  '99%',//视频的显示宽度，请尽量使用视频分辨率宽度
      "height" : '100%'//视频的显示高度，请尽量使用视频分辨率高度
    });
  },
  methods: {
    //处理时间
    handleTime(list) {
      //判断消息之间的时间间隔是否大于60秒大于则下一条显示发送时间
      for (let i = 0; i < list.length - 1; i++) {
        if (i == 0) {
          list[i].isNow = false
        }
        let gap = list[i + 1].time - list[i].time
        if (gap > 60) {
          list[i + 1].isNow = false
        } else {
          list[i + 1].isNow = true
        }
      }
      //判断消息是否是当天发送的，是的话将时间格式改为'hh:mm'
      list.forEach(item => {
        //获取当天日期
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
        let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        //获取消息发送的日期
        let messageDate = new Date(item.time * 1000)
        let messageYear = messageDate.getFullYear()
        let messageMonth = messageDate.getMonth() + 1 < 10 ? '0' + (messageDate.getMonth() + 1) : messageDate.getMonth() + 1
        let messageDay = messageDate.getDate() < 10 ? '0' + messageDate.getDate() : messageDate.getDate()
        //判断两个日期是否相同，相同则设置时间格式
        if (`${year}${month}${day}` == `${messageYear}${messageMonth}${messageDay}`) {
          item.timeType = 'hh:mm'
        }
      })
    },
    //获取禁言列表
    findMute(){
      let liveId = '402703536720445440'
      let param = {mute:{live:{id:liveId}}}
      findMute(param, data => {
        console.log('禁言列表',data)
      })
    },
    //跳转到私信页（从群聊切换为私聊）
    toDirectMessages(nickname,id) {
      this.userId = id
      this.directNickname = nickname
      this.isDirectMessages = true
      tim.setMessageRead({conversationID: 'C2C' + this.userId})// 当前对象已读
    },
    //退出私信聊天框（从私信切换至群聊）
    closeDirectMessages() {
      this.isDirectMessages = false
      let liveId = '402703536720445440'
      this.$store.dispatch('getMessageList','GROUP' + liveId + '') //获取群聊消息列表

      //存储私信群聊id
      localStorage.currentChatId = liveId
      this.$store.commit('SAVE_CURRENT_CHAT_ID', liveId)

      tim.setMessageRead({conversationID: 'C2C' + this.userId})// 当前退出对象已读
    },
    //私聊用户
    toDirect(info){
      console.log('私聊用户',info)
      this.isDirectMessages = true
      this.userId = info.id
      this.directNickname = info.nickname
    }
  }
}
</script>

<style lang="less" scoped>
.page{
  width:100%;
  display: flex;

  .left{
    flex:3;
  }

  .right{
    flex:1;
    box-shadow: 0 0 10px rgba(0, 0, 0, .08);

    .el-radio-group{
      width:100%;

      .el-radio-button{
        width:33.33%;

        /deep/ .el-radio-button__inner{
          width:100%;
        }
      }
    }

    //私信
    .direct-messages{
      width: 99.5%;
      border-left: 1px solid rgb(220, 223, 230);
      border-right: 1px solid rgb(220, 223, 230);
      border-bottom: 1px solid rgb(220, 223, 230);
      min-height: 720px;

      .direct-messages-content{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        .direct-messages-item{
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid rgb(212, 212, 212);
          height: 60px;
          width:90%;
          cursor:pointer;

          .item-left{
            display: flex;
            align-items: center;
            flex: 2;


            .nickname{
              margin-left: 15px;
              font-size: 14px;
              width: 120px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }

            .head{
              width: 40px;
              height: 40px;
              position: relative;

              img{
                width: 100%;
                height: 100%;
                border-radius: 5px;
              }

              .slot {
                background-color: rgb(250, 81, 81);
                display: inline-block;
                border-radius: 50%;
                width: 20px;
                height: 20px;
                position: absolute;
                top: -8px;
                right: -8px;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10px;
              }
            }

          }
          .item-right{
            flex:2;
            font-size: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: right;

          }
        }
      }
    }
  }
}
</style>
